<template>
  <div class="todo-footer" v-show="todos.length"> 
    <label>
      <input type="checkbox" v-model="isAll">
    </label>
    <span>
      <span>已完成{{ doneTotal }}</span> / 全部{{ todo }}
    </span>
    <button class="btn btn-danger" @click="del">清除已完成任务</button>
  </div>
</template>

<script>
export default {
  name: "MyFooter",
  props: ["todos"],
  computed: {
    doneTotal() {
      return this.todos.reduce((pre, todo) => pre + (todo.done ? 1 : 0), 0)
    },
    todo() {
      return this.todos.length
    },
    isAll: {
      set(value) {
        this.$bus.$emit("checkAll",value)
        return value
      },
      get() {
        return this.doneTotal === this.todo && this.todo > 0
      }

    }
  },
  methods: {
    //一点击清除,只剩下了没选的
    del() {
      this.$bus.$emit("deleteChecked")
    }
  }

}
</script>

<style scoped>
/* 底部统计区域样式：flex 布局，整齐分配空间 */
.todo-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 16px;
  border-top: 1px solid #f3f4f6;
  font-size: 14px;
  color: #6b7280;
}

.todo-footer input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin-right: 8px;
  accent-color: #4285f4;
  cursor: pointer;
}

/* 底部清除按钮：默认灰色，hover 变红，避免过于突兀 */
.todo-footer .btn-danger {
  display: inline-block !important;
  /* 底部按钮默认显示 */
  background-color: #f87171;
  padding: 5px 10px;
  font-size: 13px;
}

.todo-footer .btn-danger:hover {
  background-color: #ef4444;
}
</style>
